<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹回放</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card .btn {
            margin-right: 1.2rem;
            width: 9rem;
        }

            .input-card .btn:last-child {
                margin-right: 0;
            }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="input-card">
        <h4>轨迹回放控制</h4>
        <div class="input-item">
            <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" />
            <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()" />
        </div>
        <div class="input-item">
            <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()" />
            <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()" />
        </div>
    </div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=a35c7ab8cd1668ec9b9dec67402d402c"></script>
    <script type="text/javascript">

        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [113.654572, 34.741517],
            zoom: 17
        });

        function setMarker(lng, lat) {
            map.clearMap();
            var marker = new AMap.Marker({
                position: [lng, lat],//位置
                map: map,
                icon: "image/RubCar.png",
                offset: new AMap.Pixel(-13, -26),
            })
            map.add(marker);
            map.setZoomAndCenter(16, [lng, lat]);
        }

        function displayRout(line) {
            map.clearMap();
            AMap.plugin('AMap.MoveAnimation', function () {

                marker = new AMap.Marker({
                    map: map,
                    position: line[0],
                    icon: "image/RubCar.png",
                    offset: new AMap.Pixel(-13, -26),
                });

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: map,
                    path: line,
                    showDir: true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });

                var passedPolyline = new AMap.Polyline({
                    map: map,
                    strokeColor: "#AF5",  //线颜色
                    strokeWeight: 6,      //线宽
                });

                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                    map.setCenter(e.target.getPosition(), true)
                });

                map.setFitView();

                window.startAnimation = function startAnimation() {
                    marker.moveAlong(line, {
                        duration: 2000,
                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                        autoRotation: true,
                    });
                };

                window.pauseAnimation = function () {
                    marker.pauseMove();
                };

                window.resumeAnimation = function () {
                    marker.resumeMove();
                };

                window.stopAnimation = function () {
                    marker.stopMove();
                };
            });
        }

    </script>
</body>
</html>